<template>
  <el-dialog
    class="main_reset_pwd_dialog"
    width="1000"
    :modelValue="modelValue"
    draggable
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    align-center
    destroy-on-close
  >
    <div class="flex h-[460px] items-center">
      <div
        class="w-[380px] bg-[var(--base-pwd-bg)] h-full flex items-center justify-center"
      >
        <div>
          <img src="../../imgs/pwd.png" alt="" class="block mx-auto" />
          <div
            class="text-center font-bold mb-[6px] text-[var(--base-text-color)]"
          >
            系统账号安全管控
          </div>
          <div class="text-center text-[red]">
            {{ pwd_overdue_tip }}
          </div>
        </div>
      </div>
      <div class="w-[620px] px-[64px]">
        <div id="login_container" class="login-qr"></div>
        <div class="text-center my-[8px]">请用飞书扫码进行验证</div>
        <a href="#" id="loginLink" style="display: none" target="_blank"
          >Open Login Window</a
        >
        <div class="text-center">
          <el-button @click="handleClose(false)" round>取消</el-button>
        </div>
      </div>
    </div>
    <!-- <template #footer>
      <el-button @click="handleClose(false)">取消</el-button>
    </template> -->
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
// import useUserStore from "@/store/modules/user";
import { getFeishuConfig } from "@/api/public.js";
import { getFeishuCalendarSubscribe } from "@/api/system/calendar.js";
import { on, off } from "@/utils/dom";
import { getCookie, setCookie } from "@/utils/auth";
// const userStore = useUserStore();
// 声明接收参数
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  authorizationData: { type: Object, default: () => {} },
});
const loading = ref(false);
watch(
  () => props.modelValue,
  (val) => {
    if (!val) return;
    getFeishu();
  }
);
const { authorizationData } = toRefs(props);
// 授权
const msgAuth = ref("");
const handleMsg = ({ data }) => {
  msgAuth.value = data;
  const origin = data.origin;
  if (origin) return;
  handleClose(true);
  off(window, "feishu", handleMsg);
};

window.feishuWinOpen = null;
const handleClone = (data) => {
  if (msgAuth.value) {
    ElMessage.success("授权成功");
  } else {
    ElMessage.error("授权失败");
  }
  off(feishuWinOpen, "beforeunload", handleClone);
  feishuWinOpen = null;
};
//获取飞书二维码参数.
const getFeishu = async () => {
  await getFeishuConfig().then((res) => {
    nextTick(() => {
      loading.value = true;
      setCookie("authorization", JSON.stringify(authorizationData.value));
      const url = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${
        res.data.client_id
      }&redirect_uri=${`${res.data.redirect_uri}?type=changepwd`}&response_type=code&state=STATE`;
      const QRLoginObj = window.QRLogin({
        id: "login_container",
        goto: url,
        width: "254",
        height: "254",
        style:
          "width:264px;height:264px;margin:0 auto;border:1px solid #ebeaea;border-radius: 8px;background-color: #fff;", //可选的，二维码html标签的style属性
      });
      const handleMessage = async function (event) {
        const origin = event.origin;
        if (origin && QRLoginObj.matchOrigin(origin)) {
          const loginTmpCode = event.data;
          if (feishuWinOpen) return;
          console.log(`${url}&tmp_code=${loginTmpCode}`);
          feishuWinOpen = window.open(`${url}&tmp_code=${loginTmpCode}`);
          on(window, "message", handleMsg);
          on(feishuWinOpen, "beforeunload", handleClone);
        }
      };
      if (typeof window.addEventListener != "undefined") {
        window.addEventListener("message", handleMessage, false);
      } else if (typeof window.attachEvent != "undefined") {
        window.attachEvent("onmessage", handleMessage);
      }
      loading.value = false;
    });
  });
};

const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const handleClose = async (refresh = false) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
.main_reset_pwd_dialog {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0 !important;
    border-radius: 12px;
  }
}
</style>
